<template>
    <div class="header">
        <div>
          <img src="../pages/home/assets/university.png" alt="xx大学校徽" width="60px" height="60px" style="margin:5px;float:left">
          <div class="collegeName">
            <span>成都电讯工程学院</span>
          </div>
        </div>

        <div class="time">{{nowTime}}</div>
        <div class="personalInfo">
            <div></div>
            <el-tooltip class="item" effect="light" placement="bottom-end">
                <div slot="content" style="text-align: center;font-size:18px">
                  &nbsp&nbsp{{ username }}，你好!<br/>
                  {{ idNumber }} <br/>
                  <el-button @click="homePage" size="mini" style="font-size:18px">回到首页</el-button>
                  <el-button @click="logout" size="mini" type="danger" style="font-size:18px">注销</el-button>
                </div>
                <img src="../pages/home/assets/person.png" alt="个人信息" width="40px" height="40px" style="float:right;margin:10px">
            </el-tooltip>
        </div>
    </div>

</template>


<script>
    import dayjs from 'dayjs'

    import axios from "axios";

    export default {
        name:'Header',
        data(){
            return{
              ip:'',

              nowTime:'',
              username:'张斯南',
              idNumber:'2019091612022',
              identity:''
            }
        },
        methods:{
          homePage(){
            window.location.href='/home.html'
          },
          logout(){
            sessionStorage.removeItem('token');
            sessionStorage.removeItem('identity');
            window.location.href='/sign.html'
          }
        },
        computed:{

        },
        mounted(){
          this.ip = localStorage.getItem('ip');

          //获取页面的SessionStorage
          this.token = sessionStorage.getItem('token')
          this.identity = sessionStorage.getItem('identity')
          var url = this.ip +'/' + this.identity + '/'

          axios.defaults.headers.common["token"] = this.token;
          axios.get((url + 'msg'),{withCredentials : true})
            .then((response)=>{
              this.username = response.data.name
              this.idNumber = response.data.number

            }).catch(function (error) {
            console.log(error);
          });
          //首部栏动态时间显示
          this.timer=setInterval(()=>{
              var timestamp = new Date().getTime();
              this.nowTime = dayjs(timestamp).format('YYYY MM-DD HH:mm:ss')
          },1000)
        },
        beforeDestroy(){
            clearInterval(this.timer)
        }

    }
</script>


<style>
.header{
  display: flex;
  justify-content: space-between;
  min-height: 70px;
}
.collegeName{
  float:left;
  font-size:40px;
  font-family: 华光行草_CNKI,serif;
  padding:5px;
  color:#fff
}
.time{
  display: flex;
  justify-content: center;
  align-items: center;
  float:left;
  /*margin-left: 530px;*/
  font-size:23px;
  padding:5px;
  color:#fff;
}
.personalInfo{
  margin-left:330px;
  float:right;
  padding: 5px;
}
</style>
